<template>
    <x-popup v-model="showPopup" top="30vh" :auto-hide-tab-bar="props.autoHideTabBar">
        <view class="x-vip-header flex-center flex" v-if="USERINFO">
            <view class="headimg" :class="{ 'headimg-vip': USERINFO.vip_state }">
                <image :src="USERINFO.headimg" class="headimg-image" />
                <uni-icons type="vip-filled" class="headimg-vip-icon" size="20" color="var(--xl-vip-color)"></uni-icons>
            </view>
            <view class="flex-1 pl-4 flex flex-column grid-gap-2">
                <view class="font-weight-600 text-white">{{ USERINFO.nickname }}</view>
                <view class="h10 text-204154" v-if="USERINFO.vip_state">{{ USERINFO.vip_title }}
                    {{ USERINFO.days_remaining ? USERINFO.days_remaining + '天后到期' : '永久' }}</view>
                <view class="h10 text-204154" v-else>未开通{{ WEBCONFIG.vip_name }} </view>
            </view>
            <button class="btn-contact flex flex-center grid-gap-2" open-type="contact">
                <uni-icons type="headphones" color="var(--xl-placeholder)" class="uni-icons"></uni-icons>
                <text class="text-placeholder h10">客服</text>
            </button>
        </view>
        <view class="flex-1 flex flex-center overflow-auto p-4">
            <scroll-view scroll-x>
                <view class="flex grid-gap-4 flex-nowrap">
                    <view class="flex flex-column vip-item rounded-4 grid-gap-4 flex-center"
                        :class="{ 'active': find.id == item.id }" v-for="(item, index) in list" :key="index"
                        @tap="clickItem(item)">
                        <view class="h10 font-weight-600 text-white text-center">{{ item.title }}</view>
                        <x-money type="primary" unit-type="primary" weight="bold" size="6" :money="item.price" unit="">
                            <template #prefix>
                                <text class="h10 text-primary">￥</text>
                            </template>
                            <template #suffix>
                                <text class="h10 text-primary">元</text>
                            </template>
                        </x-money>
                        <view class="text-dark-light-5 h10">有效期：{{ item.day_text }}</view>
                        <text class="give text-4C402E rounded-round px-4 py-1 h10">赠送{{ item.integral }}{{
                            WEBCONFIG?.money_unit_name
                            }}</text>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view class="p-4">
            <view class="flex flex-center rounded-round py-6 bg-primary text-white" @tap="submit">
                <text class="font-weight-600 h9">立即购买</text>
            </view>
        </view>
        <view class="pb-safe-area">
            <view class="py-4">
                <view class="flex flex-center">
                    <view class="h10 text-dark-light-5">请仔细阅读</view>
                    <view class="h10 text-primary ml-2"
                        @tap="$page.open('/pages/article/content?alias=vip_instructions')">《{{
                        WEBCONFIG?.vip_name }}说明》
                    </view>
                </view>
            </view>
        </view>
        <x-pay ref="xPayRef" @success="paySuccess" :auto-hide-tab-bar="props.autoHideTabBar" />
    </x-popup>
</template>
<script lang="ts" setup>
import { $http, $page, $system, $message } from '@/utils';
import { onMounted, ref, defineProps } from "vue";
import { getUserInfo } from '@/utils/api';
import { useUserStore, useWebConfigStore, useRefs } from "@/stores";
const props = withDefaults(defineProps<{
    autoHideTabBar?: boolean,
}>(), {
});
const webConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(webConfigStore);
const userStore = useUserStore();
const { USERINFO } = useRefs(userStore);
const showPopup = ref(false);
const list = ref<any[]>([])
const xPayRef = ref();
const emit = defineEmits(['success']);
onMounted(() => {
    getVipList()
})
const show = () => {
    // #ifdef MP-WEIXIN || MP-TOUTIAO
    if (!WEBCONFIG.value?.mp_audit && $system.isIOS()) {
        uni.showModal({
            title: '提示',
            content: `iOS暂不支持购买`
        });
        return;
    }
    // #endif
    showPopup.value = true;
}
const getVipList = () => {
    $http.get('Vip/list').then((res: any) => {
        if (res.code === $http.ResponseCode.SUCCESS) {
            list.value = res.data;
            find.value = list.value[0]
        }
    })
}
const find = ref({
    id:null
})
const clickItem = (item: any) => {
    find.value = item
}
const submit = () => {
    xPayRef.value.show({
        type: 'vip',
        alias_id: find.value.id,
        price: find.value.price,
        title: find.value.title
    });
}
const paySuccess = () => {
    getUserInfo();
    showPopup.value = false;
    emit('success')
}
defineExpose({ show });
</script>
<style lang="scss" scoped>
.x-vip-header {
    background: linear-gradient(-25deg, #031d3e, #023633);
    padding: 20px;

    .headimg {
        width: 64px;
        height: 64px;
        border: solid 2px var(--xl-white);
        border-radius: 9999rpx;
        position: relative;
        --xl-vip-color: var(--xl-placeholder);

        &.headimg-vip {
            --xl-vip-color: #4C402E;
        }

        &-image {
            width: 60px;
            height: 60px;
            border-radius: 9999rpx;
        }

        .headimg-vip-icon {
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            right: 0px;
            bottom: 0px;
            background-color: var(--xl-white);
            border-radius: 9999rpx;
        }
    }

    .text-204154 {
        color: #516a79;
    }
}

.btn-contact {
    line-height: auto;
    background-color: transparent;
}

.btn-contact .uni-icons {
    height: 16px;
    line-height: 16px;
}

.btn-contact::after {
    display: none;
}

.vip-item {
    position: relative;
    height: 160px;
    width: 160px;
    border: 2px solid var(--xl-placeholder);
    background-color: var(--xl-bg-grey);
    .give{
        background-color: var(--xl-bg);
    }
    &.active {
        border-color: #4C402E;
        background-color: var(--xl-bg);
        .give{
            background-color: #191919;
        }
    }
}
</style>